<template>
  <div class="app-container">
    <el-watermark
      :content="['Liwen-左左√', '']"
      :gap="[200, 350]"
      :width="200"
      :height="100"
      :font="font"
    >
      <el-row :gutter="20">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <!-- <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            @submit.prevent
          >
            <el-form-item label="" prop="keys">
              <el-input
                placeholder="请输入模块，taskId，需求名称"
                v-model="queryParams.keys"
                style="width: 250px; height: 35px"
                @change="handleQuery()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleEdit()"
                v-hasPermi="['tk:task:add']"
                >新增
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleEdit()"
                v-hasPermi="['tk:task:edit']"
                >修改
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['tk:task:remove']"
                >删除
              </el-button>
            </el-form-item>
          </el-form> -->

          <el-table
            :cell-style="cellStyle"
            border
            v-loading="loading"
            :data="list"
            ref="tableRef"
            :row-style="{ height: '100px' }"
            @cell-dblclick="showUnitInput"
          >
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column
              label="case编号"
              prop="execContent.caseNumber"
              width="90px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.caseNumber"
                />
                <span>{{ row.execContent.caseNumber }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column
              label="归属模块"
              prop="execContent.modelName"
              width="80px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.modelName"
                />
                <span>{{ row.execContent.modelName }}</span>
              </template>
            </el-table-column> -->
            <el-table-column
              label="用例描述"
              prop="execContent.caseDescribe"
              width="200px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  type="textarea"
                  :rows="8"
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.caseDescribe"
                />
                <span>{{ row.execContent.caseDescribe }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否执行"
              prop="execContent.isExecute"
              width="80px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.isExecute"
                />
                <span>{{ row.execContent.isExecute }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="库"
              prop="execContent.dbName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.dbName"
                />
                <span>{{ row.execContent.dbName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="表"
              prop="execContent.tableName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.tableName"
                />
                <span>{{ row.execContent.tableName }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行条件"
              prop="execContent.executeRequirement"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.executeRequirement"
                />
                <span>{{ row.execContent.executeRequirement }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行的数据"
              prop="execContent.execLorData"
              width="350px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  type="textarea"
                  :rows="8"
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="enterValueInput(row, column)"
                  v-model="row.execContent.execLorData"
                />
                <!-- <span>{{ row.execContent.expectedResults }}</span> -->

                <json-viewer
                  v-if="row.execContent.executeRequirement == 'URL_CALCULATE'"
                  copyable
                  theme="my-awesome-json-theme"
                  :expand-depth="1"
                  :value="row.execContent.execLorData"
                  style="height: 400px"
                ></json-viewer>

                <span v-else style="height: 400px">
                  {{ row.execContent.execLorData }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="期望结果"
              prop="execContent.expectedResults"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.expectedResults"
                />
                <span>{{ row.execContent.expectedResults }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实际结果"
              prop="execContent.actualResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.actualResult"
                />
                <span>{{ row.execContent.actualResult }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="对比结果"
              prop="execContent.compareResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-input
                  ref="inputRef"
                  v-if="
                    tableRowEditId === row.id &&
                    tableColumnEditIndex === column.id
                  "
                  @blur="blurValueInput"
                  @keyup.enter.native="enterValueInput(row, column)"
                  v-model="row.execContent.compareResult"
                />
                <span>{{ row.execContent.compareResult }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="" width="50px"
              ><template #default="scope">
                <el-tooltip content="删除" placement="top">
                  <el-button
                    link
                    type="primary"
                    icon="Delete"
                    @click="handleDelete(scope.row, scope.$index)"
                    v-hasPermi="['tk:case:info:remove']"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-icon @click="addTableData" class="icon" size="29" color="#fb7a14"
            ><CirclePlusFilled
          /></el-icon>
        </el-col>
      </el-row>
    </el-watermark>
  </div>
</template>

<script setup>
import { tkTaskCaseApi } from "@/api/kernel/tk-task-case.js";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();
const caseId = ref("");
caseId.value = route.query.id;
const list = ref([]);
const loading = ref(true);
const font = reactive({
  // color: "rgba(224,255,255,1)",
  color: "#87cefa",
  fontSize: 18,
});

//# 用例详情
const getCaseInfo = () => {
  tkTaskCaseApi.getCaseInfoList(caseId.value).then((res) => {
    list.value = res.rows;
    loading.value = false;
  });
};

const inputRef = ref(null);
let tableRowEditId = ref(null); // 控制可编辑的每一行
let tableColumnEditIndex = ref(null); //控制可编辑的每一列
const showUnitInput = (row, column) => {
  //赋值给定义的变量
  tableRowEditId.value = row.id; //确定点击的单元格在哪行 如果数据中有ID可以用ID判断，没有可以使用其他值判断，只要能确定是哪一行即可
  tableColumnEditIndex.value = column.id; //确定点击的单元格在哪列
};

//# 修改
const enterValueInput = (row) => {
  console.log(row);
  tkTaskCaseApi.editCaseInfo(row).then((res) => {
    ElMessage({
      showClose: true,
      message: `${res.msg}`,
      type: "success",
    });
    tableRowEditId.value = null;
    tableColumnEditIndex.value = null;
    getCaseInfo();
  });
};

const blurValueInput = () => {
  tableRowEditId.value = null;
  tableColumnEditIndex.value = null;
};
//# 添加行
const addTableData = () => {
  const newRow = {
    caseId: caseId.value,
    execContent: {
      caseNumber: ``,
      modelName: "",
      caseDescribe: "",
      isExecute: "1",
      dbName: "",
      tableName: "",
      executeRequirement: "",
      execLorData: "",
      actualResult: "",
      expectedResults: "",
      compareResult: "",
    },
    execResult: 0,
    remark: "",
  };
  let lastData = list.value[list.value.length - 1];
  let numSplit = lastData.execContent.caseNumber.split("case");
  newRow.execContent.caseNumber = "case" + setInterval(numSplit[1]);
  list.value.push(newRow);
};

// # 删除
const handleDelete = (row, index) => {
  ElMessageBox({
    title: `警告`,
    message: h("p", null, [
      h("span", null, "确认要删除 "),
      h("span", { style: "color: red" }, `${row.execContent.caseNumber}`),
    ]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      if (!row.id) {
        list.value.splice(index, 1);
      } else {
        let ids = [];
        ids.push(row.id);
        tkTaskCaseApi.infoRemove(ids).then((res) => {
          ElMessage({
            type: "success",
            message: `删除成功！`,
          });
          getCaseInfo();
        });
      }
    })
    .catch(() => {});
};
//# 行样式

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (row.execContent.executeRequirement.includes("DELETE")) {
    return { backgroundColor: "#F8E6E0" };
  }
  if (row.execContent.executeRequirement === "GENERATE_ROWKEY") {
    return { backgroundColor: "#F3E2A9" };
  }
  if (row.execContent.executeRequirement === "URL_CALCULATE") {
    return { backgroundColor: "#CEE3F6" };
  }
};

onMounted(() => {
  getCaseInfo();
});

//# case001编号自增
const setInterval = (num) => {
  var len = 3; //显示的长度，如果以0001则长度为4
  num = parseInt(num, 10) + 1; //转数据类型，以十进制自增
  num = num.toString(); //转为字符串
  while (num.length < len) {
    //当字符串长度小于设定长度时，在前面加0
    num = "0" + num;
  }
  //如果字符串长度超过设定长度只做自增处理。
  return num;
};
</script>
<style>
.my-awesome-json-theme {
  background: #fff;
  white-space: nowrap;
  color: #525252;
  font-size: 14px;
  font-family: Consolas, Menlo, Courier, monospace;

  .jv-ellipsis {
    color: #999;
    background-color: #eee;
    display: inline-block;
    line-height: 0.9;
    font-size: 0.9em;
    padding: 0px 4px 2px 4px;
    border-radius: 3px;
    vertical-align: 2px;
    cursor: pointer;
    user-select: none;
  }
  .jv-button {
    color: #49b3ff;
  }
  .jv-key {
    color: #111111;
  }
  .jv-item {
    &.jv-array {
      color: #111111;
    }
    &.jv-boolean {
      color: #fc1e70;
    }
    &.jv-function {
      color: #067bca;
    }
    &.jv-number {
      color: #fc1e70;
    }
    &.jv-number-float {
      color: #fc1e70;
    }
    &.jv-number-integer {
      color: #fc1e70;
    }
    &.jv-object {
      color: #111111;
    }
    &.jv-undefined {
      color: #e08331;
    }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    .jv-toggle {
      &:before {
        padding: 0px 2px;
        border-radius: 2px;
      }
      &:hover {
        &:before {
          background: #eee;
        }
      }
    }
  }
}
</style>
